<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="550px">
    <div class="record">
      <div class="form_item">
        <label>单价：</label>
        <p class="flex-1">{{
        type==1?infoData.contract:
        type==2?infoData.sms_amount:
        type==3?infoData.risk_credit_price:
        type==4?infoData.risk_boolea_credit_price:
        type==9?infoData.risk_new_credit_price:
        type==6?infoData.risk_radar_credit_price:
        type==11?infoData.risk_edu_credit_price:
        type==10?infoData.risk_new_up_credit_price:
        type==12?infoData.risk_mobile_credit_price:
        infoData.risk_ab_credit_price}}元/{{type==3 || type==4 ? '次': '条'}}
          <span>（{{type==1?'根据e签宝合同价格'
          : type==2?'远低于市场价格'
          : type==3?'根据百融风控价格'
          : type==4?'根据布尔数据价格'
          : type==9?'根据征信报告价格'
          : type==6?'根据雷达报告价格'
          : type==11?'根据蚂蚁报告价格'
          : type==12?'根据手机二要素价格'
          : type==10?'根据上报征信价格':'根据还款风控价格'}}）</span>
        </p>
      </div>
      <div class="form_item">
        <label>购买记录：</label>
        <div class="flex-1 flex flex-wrap">
          <div class="pointer buy_item" v-for="item in infoData.setMeal" :key="item.id"
            :class="{'active':selectId==item.id}" @click="selectId=item.id">
            <p>{{item.number}}<span class="color-999">{{type==3 || type==4 ? '次': '条'}}</span></p>
            <p>￥{{item.amount}}</p>
          </div>
        </div>
      </div>
      <div class="form_item">
        <label>账户余额：</label>
        <div class="flex-1 flex"><span style="margin-right:20px">{{infoData.shop_balance}}元</span>
          <p>余额不足？<span class="blue-font pointer" @click="goToRecharge">去充值</span></p>
        </div>
      </div>
      <p style="padding-left:50px;margin-top:20px">
        <el-checkbox :class="{'check_form':showError}" v-model="checked" @change="showError=false">我已阅读并同意<span
            class="blue-font">《增值服务营销软件服务使用规范》</span></el-checkbox>
      </p>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { buyInfo, toBuy } from '@/api/marketing'
export default {
  props: {
    dialogTitle: {
      type: String
    },
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      infoData: {},
      selectId: '',
      checked: false,
      showError: false
    }
  },
  methods: {
    goToRecharge() {
      let routeData = this.$router.resolve({
        name: 'recharge'
      })
      window.open(routeData.href, '_blank')
    },
    submit() {
      console.log(123);
      if (!this.checked) {
        this.$message({
          message: '请勾选同意使用规范',
          type: 'warning'
        })
        this.showError = true
        return
      }
      toBuy({
        buy_type: this.type,
        setmeal_id: this.selectId
      }).then(res => {
        this.dialogVisible = false
        this.$emit('getList')
      })
    },
    getData() {
      buyInfo(this.type).then(res => {
        this.infoData = res || {}
        this.selectId = this.infoData.setMeal[0].id
      })
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.getData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.record {
  padding: 20px 0;
}

.form_item {
  display: flex;
  margin-bottom: 20px;

  label {
    width: 100px;
  }

  &:nth-of-type(2) {
    margin-bottom: 0;
  }
}

.buy_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  width: 45%;
  margin-bottom: 20px;
  margin-right: 20px;

  &.active {
    border: 1px solid #ff9f37;
  }

  p {
    padding: 15px;
    font-size: 16px;

    span {
      font-size: 14px;
    }
  }

  p:last-child {
    color: #ff9f37;
  }
}

.check_form {
  /deep/.el-checkbox__inner {
    border-color: #ff4146;
  }
}
</style>
